<template>
  <div class="comment-list">
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error="error"
      error-text="加载失败,请点击重试"
      @load="onLoad"
    >
      <comment-item 
      v-for="(item,index) in list" 
      :key="index" 
      :comment="item" 
      @reply-click="$emit('reply-click',$event)"
      />
    </van-list>
  </div>
</template>
<script>
import {getCommentAPI} from '@/api';
import CommentItem from './comment-item.vue';



export default {
  name:"CommentList",
  components:{
    CommentItem
  },
  props:{
    source:{
      type:[String,Number,Object],
      required:true
    },
    type:{
      type:String,
      //自定义prop数据验证
      validator(val){
        return ['a','c'].includes(val)

      },
      default:'a'
    },
    list:{
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return {
      // list: [],
      loading: false,
      finished: false,
      error:false,
      offset:null,  //获取下一页的标记
      limit:20,  //每页的大小
    }
  },
  computed:{},
  watch:{},
  created(){
    this.loading=true
    this.onLoad()
  },
  methods:{
    async onLoad() {
      try{
        const {data}=await getCommentAPI({
          type:this.type,
          source:this.source,
          offset:this.offset,
          limit:this.limit
        })
        const {results,total_count}=data.data
        this.$emit('total-count',total_count)
        this.list.push(...results)
        this.loading=false
        if(results.length){
          this.offset=data.data.last_id
        }else{
          this.finished=true
        }
      }catch(err){
        this.error=true
        this.loading=false
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>